import React from 'react';
import './Home.scss';
import { Connect } from '../../service/Connect';
import { Carousel } from 'antd-mobile';
class Home extends React.Component {
  state = {
    data: ['', '', ''],
    initialHeight: 176,
    banner: []
  }
  componentWillMount() {
    this.setState({
      data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
    });
  }
  constructor(props) {
    super(props);
    this.setState.banner = props;
  }
  plus = () => {
    console.log(this);
  }
  render() {
    const hProp = this.state.initialHeight ? { height: this.state.initialHeight } : {};
    return (
      <div className="home" ref="home">
        <div className="bannerscrolllist">
          {this.props.data.resultBannarList && this.props.data.resultBannarList.length > 0 &&
            <Carousel
              className="my-carousel"
              autoplay={false}
              infinite={false}
              onScrollBeginDrag={false}
              selectedIndex={0}
              swipeSpeed={35}
            >
              {this.props.data.resultBannarList.map((item, index) => (
                <a href="http://www.baidu.com" key={index} style={hProp}>
                  <img
                    src={item.imageUrl}
                    alt=""
                    onLoad={() => {
                      window.dispatchEvent(new Event('resize'));
                      this.setState({
                        initialHeight: null,
                      });
                    }}
                  />
                </a>
              ))}
            </Carousel>
          }
        </div>
        <div className="resultscrollList">
          {this.props.data.resultscrollList && this.props.data.resultscrollList.length > 0 &&
            <Carousel className="my-carousel"
              vertical
              dots={false}
              dragging={false}
              swiping={false}
              autoplay
              infinite
            >
              {this.props.data.resultscrollList.map((item, index) => {
                return (<div className="v-item" key={index}>{item}</div>)
              })}
            </Carousel>
          }
        </div>
        <div className="home-content" onClick={this.plus}>123456</div>
      </div>
    );
  }
}
export default Connect(Home);
